Vue Js Show Image on Hover:To display an image on hover using Vue.js, you can utilize the v-on directive to bind the mouseenter and mouseleave events to functions. In the function triggered by mouseenter, you can update a data property to store the image source URL. Then, in the template, you can conditionally render the image using v-if based on the data property’s value. Finally, in the function triggered by mouseleave, you can reset the data property. By combining these steps, you can achieve an image display on hover effect in Vue.js.

How can I use Vue.js to show or display an image when hovering over an link?

This code snippet demonstrates how to show an image on hover using Vue.js. Initially, the showImage data property is set to false. When the mouse hovers over the <a> tag, the @mouseover event triggers and sets showImage to true, and when the mouse moves out, the @mouseout event sets it back to false.

The <img> tag is conditionally rendered using v-if="showImage". When showImage is true, the image with the specified source and alt attributes will be displayed. Otherwise, it remains hidden. Vue.js is used to handle the events and the dynamic rendering of the image based on the showImage data property.

Vue Js Show Image on Hover Link Example

<div id="app">
    <a href="#" @mouseover="showImage = true" @mouseout="showImage = false">Hover me</a>
    <img v-if="showImage" src="https://www.sarkarinaukriexams.com/images/editor/1684089154spacex-g93fad4d75_640.jpg"
      alt="Hovered Image">
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          showImage: false
        };
      },


    });

    app.mount('#app');
  </script>

Output of Vue Js Show Image on Hover Link